import React, { useEffect, useState } from "react"
import { getStorageManager } from '@/file_storage'

export default function LazyImage(props: { fullName: string, storageType: string }) {

    const [url, setUrl] = useState('')

    useEffect(() => {
        if (props.storageType === 'vision') {
            getStorageManager().getVisionStorage().getLink(props.fullName).then(url => {
                console.log(url, 'url')
                setUrl(url)
            })
        } else if (props.storageType === 'screenshot') {
            getStorageManager().getScreenshotStorage().getLink(props.fullName).then(url => {
                setUrl(url)
            })
        }
    }, [props.fullName, props.storageType])

    return <div style={{
        width: 100,
        height: 100,
        backgroundImage: `url(${url})`,
        backgroundSize: 'contain',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center'
    }} />
}